<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单历史管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <style>
        .layui-form-pane .layui-form-label {
            width: 120px;
        }
        
        .order-section {
            margin-bottom: 30px;
            border: 1px solid #e6e6e6;
            border-radius: 4px;
        }
        
        .order-section .section-title {
            background-color: #f8f8f8;
            padding: 10px 15px;
            font-weight: bold;
            border-bottom: 1px solid #e6e6e6;
        }
        
        .order-section .section-content {
            padding: 15px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        
        <!-- 当前合同订单 -->
        <div class="order-section">
            <div class="section-title">当前合同订单</div>
            <div class="section-content">
                <table class="layui-hide" id="currentOrderTable" lay-filter="currentOrderFilter"></table>
                <script type="text/html" id="currentOrderBar">
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="show">订单详情</a>
                </script>
            </div>
        </div>

        <!-- 历史订单 -->
        <div class="order-section">
            <div class="section-title">历史订单</div>
            <div class="section-content">

                <table class="layui-hide" id="historyOrderTable" lay-filter="historyOrderFilter"></table>
                <script type="text/html" id="historyOrderBar">
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="show">订单详情</a>
                </script>
            </div>
        </div>

    </div>
</div>

<script src="/static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="/static/js/common.js"></script>
<script>
    var lay, form, table, laydate;
    layui.use(['form', 'table', 'laydate'], function () {
        lay = layui.jquery;
        form = layui.form;
        util = layui.util;
        table = layui.table;
        laydate = layui.laydate;

        // 初始化日期选择器
        laydate.render({
            elem: '#signDate',
            type: 'date',
            format: 'yyyy-MM-dd'
        });

        // 获取URL参数
        var urlParams = new URLSearchParams(window.location.search);
        var contractId = urlParams.get('contractId');
        var relatedOrderNo = urlParams.get('relatedOrderNo');

        // 初始化当前合同订单表格
        table.render({
            elem: '#currentOrderTable',
            url: '/purchaseOrder/getCurrentOrderByContract',
            method: "post",
            contentType: "application/json; charset=utf-8",
            where: {
                contractId: contractId,
                relatedOrderNo: relatedOrderNo
            },
            cols: [[
                {field: 'purchaseOrderId', width: 200, title: '订单ID', sort: true},
                {field: 'orderNo', width: 150, title: '订单号'},
                {field: 'supName', width: 150, title: '供应商名称'},
                {
                    field: 'signDate',
                    width: 120,
                    title: '签约日期',
                    templet: "<div>{{layui.util.toDateString(d.signDate, 'yyyy-MM-dd')}}</div>"
                },
                {
                    field: 'validStartDate',
                    width: 120,
                    title: '有效起始日期',
                    templet: "<div>{{layui.util.toDateString(d.validStartDate, 'yyyy-MM-dd')}}</div>"
                },
                {
                    field: 'validEndDate',
                    width: 120,
                    title: '有效结束日期',
                    templet: "<div>{{layui.util.toDateString(d.validEndDate, 'yyyy-MM-dd')}}</div>"
                },
                {
                    field: 'expectedDeliveryDate',
                    width: 120,
                    title: '预计交货日期',
                    templet: "<div>{{layui.util.toDateString(d.expectedDeliveryDate, 'yyyy-MM-dd')}}</div>"
                },
                {field: 'deliveryPlanType', width: 120, title: '交期计划方式'},
                {field: 'totalAmount', width: 120, title: '订单总金额'},
                {field: 'docStatus', width: 100, title: '订单状态', 
                    templet: function(d) {
                        var statusMap = {
                            '10': '准备',
                            '11': '驳回', 
                            '15': '修改',
                            '30': '待审',
                            '70': '执行',
                            '80': '完结'
                        };
                        return statusMap[d.docStatus] || d.docStatus;
                    }
                },
                {field: 'docVersion', width: 80, title: '版本号'},
                {field: 'redFlag', width: 80, title: '红冲标记', 
                    templet: function(d) {
                        return d.redFlag === 'YES' ? '是' : '否';
                    }
                },
                {
                    field: 'createTime',
                    width: 150,
                    title: '创建时间',
                    templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
                },
                {field: 'createUser', width: 100, title: '创建人'},
                {title: '操作', minWidth: 100, toolbar: '#currentOrderBar', align: "center", fixed: 'right'}
            ]],
            done: function (res, curr, count) {
                // 当前订单表格渲染完成
            },
            limits: [5, 10, 15, 20, 25, 50, 100, 500],
            limit: 10,
            page: false
        });

        // 初始化历史订单表格
        table.render({
            elem: '#historyOrderTable',
            url: '/purchaseOrder/getHistoryOrdersByContract',
            method: "post",
            contentType: "application/json; charset=utf-8",
            where: {
                contractId: contractId,
                relatedOrderNo: relatedOrderNo
            },
            cols: [[
                {field: 'purchaseOrderId', width: 200, title: '订单ID', sort: true},
                {field: 'orderNo', width: 150, title: '订单号'},
                {field: 'supName', width: 150, title: '供应商名称'},
                {
                    field: 'signDate',
                    width: 120,
                    title: '签约日期',
                    templet: "<div>{{layui.util.toDateString(d.signDate, 'yyyy-MM-dd')}}</div>"
                },
                {
                    field: 'validStartDate',
                    width: 120,
                    title: '有效起始日期',
                    templet: "<div>{{layui.util.toDateString(d.validStartDate, 'yyyy-MM-dd')}}</div>"
                },
                {
                    field: 'validEndDate',
                    width: 120,
                    title: '有效结束日期',
                    templet: "<div>{{layui.util.toDateString(d.validEndDate, 'yyyy-MM-dd')}}</div>"
                },
                {
                    field: 'expectedDeliveryDate',
                    width: 120,
                    title: '预计交货日期',
                    templet: "<div>{{layui.util.toDateString(d.expectedDeliveryDate, 'yyyy-MM-dd')}}</div>"
                },
                {field: 'deliveryPlanType', width: 120, title: '交期计划方式'},
                {field: 'totalAmount', width: 120, title: '订单总金额'},
                {field: 'docStatus', width: 100, title: '订单状态', 
                    templet: function(d) {
                        var statusMap = {
                            '10': '准备',
                            '11': '驳回', 
                            '15': '修改',
                            '30': '待审',
                            '70': '执行',
                            '80': '完结'
                        };
                        return statusMap[d.docStatus] || d.docStatus;
                    }
                },
                {field: 'docVersion', width: 80, title: '版本号'},
                {field: 'redFlag', width: 80, title: '红冲标记', 
                    templet: function(d) {
                        return d.redFlag === 'YES' ? '是' : '否';
                    }
                },
                {
                    field: 'createTime',
                    width: 150,
                    title: '创建时间',
                    templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
                },
                {field: 'createUser', width: 100, title: '创建人'},
                {title: '操作', minWidth: 100, toolbar: '#historyOrderBar', align: "center", fixed: 'right'}
            ]],
            done: function (res, curr, count) {
                // 历史订单表格渲染完成
            },
            limits: [5, 10, 15, 20, 25, 50, 100, 500],
            limit: 10,
            page: true
        });

        // 监听历史订单搜索操作
        form.on('submit(history-search-btn)', function (data) {
            searchHistoryOrders(data);
            return false;
        });

        form.on('submit(history-refresh-btn)', function (data) {
            table.reload('historyOrderTable');
        });

        // 监听当前订单表格操作
        table.on('tool(currentOrderFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'show') {
                showOrderDetail(data);
            }
        });

        // 监听历史订单表格操作
        table.on('tool(historyOrderFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'show') {
                showOrderDetail(data);
            }
        });

    });

    function searchHistoryOrders(data) {
        table.reload('historyOrderTable', {
            page: {
                curr: 1
            }
            , where: {
                param: data.field
            }
        }, 'data');
    }

    // 显示订单详情
    function showOrderDetail(data) {
        var index = layer.open({
            title: '订单详情 - ' + data.orderNo,
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['95%', '95%'],
            content: '/static/page1/order1/add.html?orderId=' + data.purchaseOrderId + '&isShow=true',
        });
        lay(window).on("resize", function () {
            layer.full(index);
        });
    }
</script>

</body>
</html>
